<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Types</title>
    <style>
        button {
            font-family: "helvetica neue", helvetica, sans-serif;
            letter-spacing: 1px;
            text-transform: uppercase;
            border: 2px solid rgb(200 200 0 / 60%);
            background-color: rgb(0 217 217 / 60%);
            color: rgb(100 0 0 / 100%);
            box-shadow: 1px 1px 2px rgb(0 0 200 / 40%);
            border-radius: 10px;
            padding: 3px 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 按钮 -->
    <button type="button">Player1:Chris</button>

    <button id="mybutton">Click me</button>

    <!-- <button>点击!</button> -->

</body>
    <script>
        const button = document.querySelector("button");
        button.addEventListener("click", function (){
            const name = prompt("请输入新的名字");
            button.textContent = `Player1:${name}`;
        })


        // 创建一个函数，该函数创建一个新的段落元素，将其文本内容设置为“你点击了按钮”，并将其添加到文档的主体中。
        // 然后，使用addEventListener()方法将该函数添加到按钮的“click”事件上。
        // 最后，当用户点击按钮时，该函数将被调用，并且新的段落元素将被添加到文档的主体中。 
        document.addEventListener("DOMContentLoaded", () => {
            function createParagraph() {
                const parn = document.createElement("p");
                parn.textContent = "你点击了按钮";
                document.body.appendChild(parn);
            }
            const button = document.getElementById("mybutton");
            button.addEventListener("click", createParagraph);

            /**
             * 1.取得页面上的所有按钮的引用并将他们置于一个数组中
             * 2.通过for循环为每一个按钮添加一个点击事件的监听器
             * 3.当用户点击按钮时，调用createParagraph()函数来创建一个新的段落元素
             * 4.将新的段落元素添加到文档的主体中
             * **/
            // const buttons = document.querySelectorAll("button");

            // for (const button of buttons) {
            //     button.addEventListener("click", createParagraph);
            // }
        })
        
        const button1 = document.querySelectorAll("button");
        for (let i = 0; i < button1.length; i++) {
            button1[i].addEventListener("click", function () {
                alert("你点击了按钮");
            }) 
        }

        // Example of different data types
        let stringType = "Hello, World!";
        let numberType = 42;
        let booleanType = true;
        let nullType = null;
        let undefinedType;
        let objectType = { name: "John", age: 30 };
        let arrayType = [1, 2, 3, 4, 5];
        let symbolType = Symbol("unique");
        let symbolType2 = Symbol("unique");

        console.log("String:", stringType);

        console.log("Number:", numberType);

        console.log("Boolean:", booleanType);

        console.log("Null:", nullType);

        console.log("Undefined:", undefinedType);

        console.log("Object:", objectType);
        console.log(objectType.name);

        console.log("Array:", arrayType);
        console.log(arrayType[2]);

        console.log("Symbol:", symbolType);
        console.log(symbolType == symbolType2);


        console.log(typeof 123);
        console.log(typeof "Hello");
        console.log(typeof true);
        console.log(typeof null);
        console.log(typeof undefined);
        console.log(typeof {});
        console.log(typeof []);
        console.log(typeof Symbol("unique"));

        // 转换为字符串
        console.log(objectType.toString());
        console.log(arrayType.toString());
        console.log(symbolType.toString());

        const Ab = null;
        // console.log(Ab.toString())
        console.log("---------------------------------")

        // 转化为整数
        console.log(parseInt("123"));
        console.log(parseInt("123.45"));
        console.log(parseInt("asd123234"));
        console.log(parseInt("123asd"));
        console.log(parseInt("123.45asd"));
        console.log("---------------------------------")

        // 转化为浮点数
        console.log(parseFloat("123"));
        console.log(parseFloat("123.45"));
        console.log(parseFloat("asd123234"));
        console.log(parseFloat("123asd"));
        console.log(parseFloat("123.45asd"));
        console.log("---------------------------------")


        // 全局变量和局部变量
        var global = "global"; // 全局变量
        function demo1() {
            var local = "local"; // 局部变量
            console.log(global); // 可以访问全局变量
            console.log(local); // 可以访问局部变量
            val = 999; //全局变量
        }
        demo1();
        console.log(global); // 可以访问全局变量
        console.log(val);
        // console.log(local); // 报错，无法访问局部变量
        console.log("---------------------------------")


        
        console.log("---------------------------------")
    </script>

</html>